import React from 'react';
import ReactDom from 'react-dom';

import bgImg from '../images/aacebg-01.png';
import bannerImg from '../images/banner-01.png';
import i2016Img from '../images/2016-01.png';
import i2017Img from '../images/2017-01.png';
import i2018Img from '../images/2018-01.png';
import i2019Img from '../images/2019-01.png';
import i2020Img from '../images/2020-01.png';
import moreImg from '../images/more-01.png';
import Channels from '../components/channels';
import { hashHistory } from 'react-router';
import { connect } from 'react-redux';

import { conference, initConference } from '../actions/conference';

const Height = 2226;
const Width = 1333;

class AACEPage extends React.Component {

    constructor() {
        super();
        this.state = {
            id: "",
            year: ""
        }
    }

    orientationChange() {
        this.forceUpdate();
    }

    componentDidMount() {
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.orientationChange.bind(this), false); 
    }

    componentWillUnmount() {
        window.removeEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.orientationChange.bind(this), false); 
    }

    displayChannels(id, year) {
        let allButton = document.querySelectorAll(".easdchannel") || [];
        for(let i = 0; i< allButton.length; i++) {
            if (allButton[i].style.display == "block" && allButton[i].id!=(id+year)) 
                allButton[i].style.display = "none";
        }
        this.props.initConference();
        this.props.conference(id, year);
        this.setState({
            id: id,
            year: year
        });
        let targetDiv = document.getElementById(id+year);
        if (targetDiv != null )
            if (targetDiv.style.display == "none") {
                targetDiv.style.display = "block";
                console("widthSize : " + widthSize);
                const heightSize = Math.max(Height * widthSize,document.body.scrollHeight) ;
                let parentDiv = document.getElementById('conference');
                parentDiv.style.height = heightSize + "px";
            } else {
                targetDiv.style.display = "none";
                const heightSize = Math.max(Height * widthSize,document.body.clientHeight) ;
                let parentDiv = document.getElementById('conference');
                parentDiv.style.height = heightSize + "px";
            }
    }
    handleSwitchChannel(channelId) {
        hashHistory.push('conference/list/'+channelId+'/1');
    }

    render() {
        
        const widthSize = document.body.clientWidth / Width;
        const heightSize = Math.max(Height * widthSize,document.body.clientHeight) ;
        // 等比例缩小，算出高度。
        const size = heightSize * 0.97;

        const top = heightSize * 0.03;
        const hbanner = widthSize * 508;
        const h2016 = widthSize * 319;
        const h2017 = widthSize * 249;
        const h2018 = widthSize * 253;
        const h2019 = widthSize * 252;
        const h2020 = widthSize * 253;
        const hmore = size - (hbanner + h2016 + h2017 + h2018 + h2019 + h2020);

        let channels=this.props.channels;
        let styles = {};
       
        if (channels) {
            let line = channels.length/4 > 1 ? channels.length/4 : 1;
            styles = {
                channels: {
                    height: (8 * line) + "rem",
                },
                channel: {
                    width:"calc(100% / 4)", 
                    float: "left", 
                    textAlign:"center", 
                    paddingTop: "0.5rem",
                    fontSize: "0.7rem",
                    minHeight:"6.2rem"
                },
                channelImg: {
                    backgroundSize: "3rem 3rem",
                    width:"3rem",
                    height:"3rem",
                    margin:"auto",
                    borderRadius:"50%"
                }
            }
        }
        // document.body.style="background: url("+bgImg+");background-size: 100% auto;background-repeat: no-repeat;";
        return(
            <div id="conference" style={{backgroundImage:"url("+bgImg+")",backgroundSize:"100% 100%",top: "0px",position: "absolute", height:heightSize}}>
                <div>
                    <img src={bannerImg} style={{width:"100%", display:"block", height:hbanner, marginTop:top}}/>
                    <img src={i2016Img} style={{width:"100%", display:"block", height:h2016}} onTouchStart={() => this.displayChannels("AACE","2016")}/>
                    <div className="easdchannel" id="AACE2016" style={{display:"none", backgroundColor:"#fff"}}>
                        <Channels styles={styles} channels={ channels } handleSwitchChannel={this.handleSwitchChannel.bind(this)}/>
                    </div>
                    <img src={i2017Img} style={{width:"100%", display:"block", height:h2017}}/>
                    <img src={i2018Img} style={{width:"100%", display:"block", height:h2018}}/>
                    <img src={i2019Img} style={{width:"100%", display:"block", height:h2019}}/>
                    <img src={i2020Img} style={{width:"100%", display:"block", height:h2020}}/>
                    <div style={{backgroundImage:"url("+moreImg+")",backgroundSize:"100% auto",height:hmore}}/>
                </div>
            </div>
            )
    }
}
// 
function mapStateToProps(state){
    return { 
        channels: state.conference.channels
    };
}

export default connect(mapStateToProps, { conference, initConference })(AACEPage);